<template>
  <div class="nameEdit-page">
   <van-nav-bar  :style="{backgroundColor: '#f5f5f5'}">
    <div slot="left">
      <van-button plain type="primary" size="small" @click="$emit('close')">取消</van-button>
    </div>
    <div slot="right">
      <van-button type="primary" size="small" @click="onYesName">确定</van-button>
    </div>

   </van-nav-bar>

    <van-field
      v-model="value"
      placeholder="输入要修改的名称"
      input-align="left"
      right-icon="clear"
      maxlength="20"
      show-word-limit
    >
    </van-field>

    <div class="userNameBox">
      <span class="userName">*修改用户名</span>
    </div>
  </div>
</template>

<script>
import { patchEditUserProfile } from '@/service/getDate'
export default {
  name: 'NameEditPage',
  data () {
    return {
      value: ''
    }
  },
  methods: {
   async onYesName() {
    this.$toast.loading({
      message: '更改中...',
      duration: 0,
      forbidClick: true,
    })
      try {
        await patchEditUserProfile({
          name: this.value
        })
        this.$emit('input', this.value)
        this.$toast.success('修改成功')
      } catch(err) {
        this.$toast.fail('修改失败')
      }
      this.$emit('close')
    }
  }
}
</script>

<style lang="scss" scoped>
 .nameEdit-page {
  /deep/.van-field__body {
    .van-field__right-icon {
       display: none;
    }
    .van-field__right-icon:hover {
      display: block;
    }
  }
 .userNameBox {
  line-height: 1;

  .userName{
    font-size: 25px;
    color: #999;
    padding-left: 30px;
  }
 }
 /deep/ .van-cell__value {
    display: flex;
    justify-content: space-between;
  }
 }
</style>